<template>
  <div class="team-user-detail flex">
    <div class="left flex flex-end">
      <div class="section user-detail page-content">
        <SetPath :path="path" />
        <div class="user-info">
          <div class="user-img margin-12-0">
            <Carousel :autoplay="false" :loop="false" :simple="true" height="923px" :list="imgList" />
          </div>
          <h4 class="user-name padding-12-0 margin-0 center">{{ detail.name }}</h4>
          <p class="user-position">{{ detail.position }}</p>
        </div>
      </div>
    </div>

    <div class="right">
      <div class="flex margin-0 flex-end">
        <FavBtn :detail="detail" @refresh="loadDetail" />
      </div>
      <div class="information">
        <div class="line-bottom padding-10-0">
          <p class="margin-0">编号：<span class="color-gray-light">{{ detail.caseTitle || '--' }}</span></p>
          <p>显像剂信息：<span class="color-gray-light">{{ detail.tracer || '--' }}</span></p>
          <p>扫描设备信息：<span class="color-gray-light">{{ detail.machine || '--' }}</span></p>
        </div>
        <div class="padding-10-0 line-bottom-dotted">
          <p class="size-18">患者信息：</p>
          <div class="flex simple-column">
            <div class="color-gray-light">
              <p>年龄</p>{{ detail.patientAge }}
            </div>
            <div class="color-gray-light">
              <p>性别</p>{{ detail.patientGender }}
            </div>
          </div>
        </div>

        <div class="padding-20-0 line-bottom-dotted">
          <p class="size-18">临床病例：<span class="border padding-4 color-gray-light">{{ detail.clinical }}</span></p>
          <p class="size-18">临床病史：<span class="border padding-4 color-gray-light">{{ detail.clinicalHistory }}</span></p>
          <p class="size-18">诊断：
            <!-- <span v-if="detail.diagnosis === '01'" class="border padding-4 color-gray-light">良性</span>
            <span v-else class="border padding-4 color-gray-light">良性</span> -->
            <el-tag v-if="detail.diagnosis === '恶性'" effect="light" type="error"
              class="size-18">{{ detail.diagnosis }}</el-tag>
            <el-tag v-else effect="light" type="success" class="size-18">{{ detail.diagnosis }}</el-tag>
          </p>
        </div>
        <div class="padding-20-0 line-bottom-dotted">
          <h3 class="size-24 center">病灶鉴别</h3>
          <div class="simple-table">
            <div class="head">
              <!--<span>良性</span>
                <span>恶性</span>
                <span>干扰项</span>-->
              <span>病灶位置</span>
              <span>病灶信息</span>
            </div>
            <div v-for="item in detail?.lesionVOs" :key="item.lesionId" class="body">
              <span>
                {{ item.lesionLocation || 'N/A' }}
              </span>
              <span>
                {{ item.lesionInfo || 'N/A' }}
              </span>
            </div>
          </div>
          <p>病例描述：<br><span class="color-gray-light" v-html="detail.opinion || '--'" /></p>
        </div>

        <!-- <div class="line-bottom flex padding-10-0">
          <p style="flex: 50% 0;">记录者：<span class="color-gray-light">{{ detail.creatorName || '--' }}</span></p>
          <p>审核者：<span class="color-gray-light">{{ detail.creatorName || '--' }}</span></p>
        </div> -->

      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import FavBtn from '@/pages/case/components/FavBtn.vue'
import SetPath from '@/pages/layout/component/SetPath.vue'
import { useRoute } from 'vue-router'
import { computed, ref } from "vue";
import * as api from "@/api/case";
import { storeToRefs } from "pinia";
import { useUser } from "@/store/user";
import Carousel from '@/components/Carousel.vue'

const userInfo = storeToRefs(useUser())?.userInfo || {}

const route = useRoute()
const path = [{ label: '样例列表', path: '/case' }, { label: '样例详情' }]

let detail = ref({})
const imgList = computed(() => {
  return [].concat(detail.value?.labelImageVO).concat(detail.value?.caseImageVO).filter(Boolean)
})

async function loadDetail() {
  const { data } = await api.findCaseDetail({ caseId: route.query.id, userId: userInfo.value.userId }) || {}
  detail.value = data || {}
}
loadDetail()

</script>

<style lang='scss' scoped>
p {
  font-size: 18px;
  font-weight: bold;
  color: #1a1a1a;
  line-height: 36px;
  max-width: 828px;
}

span {
  font-weight: normal;
}

.intro-label {
  display: flex;
  margin: 0;
  align-items: center;

  img {
    height: 32px;
    margin-right: 8px;
  }
}

.team-user-detail {
  padding-top: 64px;
  align-items: flex-start;
}

.left {
  flex: 46% 0;
  min-height: 700px;
  padding: 48px 0 600px 0;

  background: #F5F5F6;
  align-items: flex-start;
}

.user-detail {
  width: 462px;
  padding-right: 40px;

  .user-info {
    .user-img {
      width: 282px;
      height: 376px;
      position: relative;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      background-color: #dedede;

      img {
        height: 4px;
        position: absolute;
      }
    }

    .user-name {
      font-size: 24px;
    }

    .user-position {
      color: #4D4D4D;
      margin: 0;
      text-align: center
    }
  }
}

.right {
  flex: 1;
  margin-top: 64px;
  padding: 48px;
  max-width: 600px;
}

.custom-carousel {
  width: 462px;

  :deep(.border-image) {

    &:before,
    &:after {
      display: none;
    }
  }

  :deep(.carousel-image) {
    padding: 0;

    .img-show {
      border: none;
    }

    .img-show-container {
      border-color: #333333;
    }
  }
}

.simple-column {
  width: 100%;
  height: 42px;
  border: 1px solid #DADBDD;

  div {
    flex: 50%;
    display: flex;
    font-size: 18px;
    align-items: center;

    p {
      padding: 0 16px;
      line-height: 42px;
      margin-right: 12px;
      background-color: #EBEBEB;
    }
  }
}

.simple-table {
  width: 100%;
  display: table;
  text-align: center;

  .head {
    color: white;
    font-size: 18px;
    background-color: #1A1A1A;
    display: table-header-group;

    span {
      padding: 23px 0;
      display: table-cell;
    }
  }

  .body {
    display: table-row;
    background: #F5F5F6;

    span {
      font-size: 18px;
      padding: 23px 0;
      display: table-cell;
    }
  }
}
</style>